import React, { Component } from 'react'
import { Tabs } from 'antd'
import TheTable from '@/components/TheTable'
import TheButton from '@/components/TheButton';
import ThePagination from '@/components/ThePagination';
import TheQueryForm from '@/components/TheQueryForm';
import { getDateTime3 } from '@/utils/getDate'
import store from "@/store/store"
import _ from 'lodash'
import { callSalesReturnOrderPage } from '@/request/callOrder/afterSaleOrder'

//售后单列表
export default class afterSaleOrder extends Component {
  constructor() {
    super()
    this.state = {
      tabValue: '',//选中tbd值
      tabValueData: [
        { tab: '全部', key: '' },
        { tab: '待处理', key: '1' },
        { tab: '退款/变更成功', key: '2' },
        { tab: '退款失败', key: '3' },
        { tab: '已关闭', key: '0' }
      ], //tab内容
      searchOption: [
        { field: 'orderIdSearch', label: '订单/售后单编号', placeholder: '请输入订单/售后单编号', required: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'times', label: '申请时间', required: false, rules: [], type: 'RangePicker', defaultValue: '' },
        {
          field: 'refundType',
          label: '售后类型',
          placeholder: '全部',
          type: 'Select',
          options: [
            { label: '全部', value: '' },
            { label: '变更', value: '0' },
            { label: '退款', value: '1' },
          ],
          defaultValue: ''
        },
        { field: 'userName', label: '宠主姓名/ID', placeholder: '请输入宠主姓名/ID', required: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'userMobile', label: '宠主电话', placeholder: '请输入宠主电话', required: false, rules: [], type: 'Input', defaultValue: '' }
      ],
      queryForm: {},
      columns: [
        {
          title: '订单编号',
          dataIndex: "orderId",
          key: "orderId"
        },
        {
          title: '售后单编号',
          dataIndex: "salesReturnId",
          key: "salesReturnId"
        },
        {
          title: '售后类型',
          dataIndex: "refundType",
          key: "refundType",
          render: (text) => {
            let refundType = ''
            switch (text) {
              case '0':
                refundType = '变更'
                break
              case '1':
                refundType = '退款'
                break
              default:
                refundType = '-'
            }
            return refundType
          }
        },
        {
          title: '申请时间',
          dataIndex: "refundApplyTime",
          key: "refundApplyTime"
        },
        {
          title: '售后状态',
          dataIndex: "refundStatus",
          key: "refundStatus",
          render: (text, record) => {
            let refundStatus = '', changeStatus = ''
            if (record.refundType === '1') {
              //退款状态
              switch (text) {
                case '0':
                  refundStatus = '退款关闭'
                  break
                case '1':
                  refundStatus = '待处理'
                  break
                case '2':
                  refundStatus = '退款成功'
                  break
                case '3':
                  refundStatus = '退款失败'
                  break
                default:
                  refundStatus = '-'
              }
              return refundStatus
            }
            if (record.refundType === '0') {
              //变更状态
              switch (record.changeStatus) {
                case '0':
                  changeStatus = '变更关闭'
                  break
                case '1':
                  changeStatus = '待处理'
                  break
                case '2':
                  changeStatus = '变更成功'
                  break
                default:
                  changeStatus = '-'
              }
              return changeStatus
            }
          }
        },
        {
          title: '操作',
          fixed: 'right',
          render: (_, record) => { return <TheButton haspermi={['call:afterSaleOrder:details']} onClick={() => { this.orderDetails(record) }}>查看订单</TheButton> }
        }
      ],
      dataSource: [], //表格数据
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
    }
  }
  componentDidMount() {
    let searchParams = store.getState().searchValue
    let { pageNo, pageSize, queryForm, pathName, refundStatus, changeStatus } = searchParams
    if (searchParams && pathName == 'afterSaleOrder') {
      this.setState({
        queryForm, pageData: { pageNo, pageSize }, tabValue: refundStatus
      }, () => {
        this.queryFormRef.onSetDefault({ ...queryForm })
        this.getData(queryForm)
      })
    } else {
      this.getData()
    }
  }

  //获取数据
  getData = async (values) => {
    let { pageData, queryForm, tabValue } = this.state
    if (values && !_.isEmpty(values.times)) {
      values.refundApplyStartTime = getDateTime3(values.times[0]) + " 00:00:00"
      values.refundApplyEndTime = getDateTime3(values.times[1]) + " 23:59:59"
      delete values.times
    }
    this.setState({
      queryForm: values === undefined ? queryForm : { ...values }
    }, async () => {
      let params = {
        refundStatus: tabValue,
        changeStatus: tabValue,
        ...pageData,
        queryForm: this.state.queryForm,
        ...values,
      }
      store.dispatch({
        type: 'SaveSearchValues',
        data: { pathName: 'afterSaleOrder', ...params }
      })
      let res = await callSalesReturnOrderPage({ refundStatus: tabValue, changeStatus: tabValue, ...pageData, ...queryForm, ...values })
      if (res.code === 0) {
        this.setState({
          dataSource: res.data,
          pageData: {
            pageNo: res.pageNo,
            pageSize: res.pageSize
          },
          total: res.totalCount
        })
      }
    })
  }
  //切换标签页Tabs
  tabChange = (value) => {
    //更改tab值后刷新table
    this.setState({
      tabValue: value
    }, async () => {
      await this.pageChange(1, 10)
    })
  }
  //切换分页
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: { pageNo, pageSize }
    }, async () => {
      await this.getData()
    })
  }
  //搜索
  onFormSearch(values) {
    if (values && values.hasOwnProperty('time')) {
      values.createTimeStart = values.time[0].format('YYYY-MM-DD') + ' 00:00:00'
      values.createTimeEnd = values.time[1].format('YYYY-MM-DD') + ' 23:59:59'
      delete values.time
    }
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }
    }, () => {
      this.getData(values)
    })
  }
  //搜索重置
  onReset() {
    this.setState({ queryForm: {} }, () => {
      this.pageChange(1, 10)
    })
  }
  //查看订单详情
  orderDetails = (record) => {
    //售后类型 0 变更 1 退款 并跳转至对应的详情页面
    if (record.refundType === '1') {
      return this.props.history.push("/call/order/afterSaleOrder/refundDetails/" + record.salesReturnId)
    }
    if (record.refundType === '0') {
      return this.props.history.push("/call/order/afterSaleOrder/changeDetails/" + record.salesReturnId)
    }
  }
  render() {
    const { dataSource, columns, tabValue, tabValueData, pageData: { pageNo, pageSize }, total, searchOption } = this.state
    return (
      <div className="p-layout-box" >
        <TheQueryForm ref={(ref) => this.queryFormRef = ref} option={searchOption} show={true}
          onReset={() => this.onReset()}
          onGetValues={(values) => this.onFormSearch(values)} ></TheQueryForm>
        <Tabs activeKey={tabValue} onChange={this.tabChange}>
          {
            tabValueData.map(item => {
              return (
                <Tabs.TabPane tab={item.tab} key={item.key}>
                  <TheTable scroll={{ x: 'max-content', y: '65vh' }} dataSource={dataSource} columns={columns}></TheTable>
                  <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} ></ThePagination>
                </Tabs.TabPane>
              )
            })
          }
        </Tabs>
      </div>
    )
  }
}